<template>
    <div>
        <el-dialog
            :title="subName ? `新增子菜单-${subName}` : '新增'"
            :visible.sync="visible"
            :close-on-click-modal="false">

            <div class="table_form_wrap">
                <el-form ref="form" :model="form" :rules="rules" @keyup.enter.native="handleSubmit()" label-width="120px">
                    <el-form-item label="父级部门" prop="pid">
                        <DeptCascader
                            :disabledId.sync="disabledId"
                            :cascaderDeptVal.sync="cascaderDeptVal"
                            :checkStrictly="true"
                            :clearable="false"
                            styles="width: 80%">
                        </DeptCascader>
                    </el-form-item>
                    <el-form-item label="部门名称" prop="name">
                        <el-input placeholder="" v-model="form.name" clearable style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="部门缩写" prop="nameAbbr">
                        <el-input placeholder="" v-model="form.nameAbbr" clearable style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="部门编码" prop="code">
                        <el-input placeholder="" v-model="form.code" clearable style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="部门经理" prop="ownerEmpName">
                        <el-input placeholder="" v-model="form.ownerEmpName" clearable style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="经理工号" prop="ownerEmpWorkNo">
                        <el-input placeholder="" v-model="form.ownerEmpWorkNo" clearable style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="部门电话" prop="mobile">
                        <el-input placeholder="" v-model="form.mobile" clearable style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="部门传真" prop="fax">
                        <el-input placeholder="" v-model="form.fax" clearable style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="部门地址" prop="address">
                        <el-input placeholder="" v-model="form.address" clearable style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="部门排序" prop="sort">
                        <el-input-number v-model="form.sort" :min="1" style="width: 80%" placeholder="排序"></el-input-number>
                    </el-form-item>
                    <el-form-item label="部门备注" prop="description">
                        <el-input v-model="form.description" type="textarea" :rows="4" clearable placeholder="备注..." style="width: 80%;"></el-input>
                    </el-form-item>
                </el-form>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button @click="handleSubmit()" type="primary" :submitLoading="submitLoading">提 交</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
import DeptCascader from '@/views/hr/dept/components/edit-dept-cascader'
export default {
    components: {
        DeptCascader
    },
    data() {
        return {
            visible: false,
            submitLoading: false,

            subName: null,

            form: {
                pid: null,
                name: null,
                nameEn: null,
                nameAbbr: null,
                description: null,
                code: null,
                ownerEmpWorkNo: null,
                ownerEmpName: null,
                mobile: null,
                fax: null,
                address: null,
                sort: null,
                deleted: null,
                uname: null,
                ctime: null,
                utime: null,
            },
            rules: {
                name: [{required: true, message: '名称不能为空', trigger: 'blur'}],
                code: [{required: true, message: '编码不能为空', trigger: 'blur'}],
            },

            cascaderDeptVal: [],
            disabledId: null,
        }
    },

    watch: {
        cascaderDeptVal(val) {
            //监听到路径变化需要查出这个三级分类的分组信息
            this.form.pid = val[val.length - 1];
        }
    },

    methods: {
        addRoot() {
            const refs = this.$refs
            this.form.id = null
            this.form.pid = null
            this.form.sort = 1
            this.visible = true


            this.$nextTick(() => {
                refs['form'].resetFields()
            })
        },

        append(data) {
            const refs = this.$refs
            this.form.id = null
            this.form.pid = data.id;
            this.form.sort = 1;
            this.visible = true

            this.$nextTick(() => {
                refs['form'].resetFields()
            })
        },

        edit(data) {
            const refs = this.$refs
            this.visible = true

            this.cascaderDeptVal = []
            this.disabledId = null

            this.$nextTick(() => {
                refs['form'].resetFields()
                if(data.id) {
                    this.disabledId = data.id
                    this.getInfo(data.id)
                }
            })
        },

        /**
         * 详细信息
         */
        async getInfo(id) {
            if (id) {
                const res = await this.$http({
                    url: '/hr/dept/info/' + id,
                    method: 'GET'
                })
                this.form = Object.assign({}, res.data)

                setTimeout(() => {
                    // 去除当前节点，只留父节点
                    this.cascaderDeptVal = this.form.cascaderDeptPathVals.slice(0, this.form.cascaderDeptPathVals.length-1)
                }, 500);
            }
        },

        /**
         * 提交表单
         */
        async handleSubmit() {
            const refs = this.$refs
            this.submitLoading = true
            const valid = await refs['form'].validate().catch(() => {})
            if(valid) {
                const res = await this.$http({
                    url: `/hr/dept/${!this.form.id ? 'save' : 'update'}`,
                    method: 'POST',
                    data: this.form
                })
                if (this.ResultMessage(res)) {
                    this.$emit('reload')
                    this.submitLoading = false
                    this.visible = false
                } else {
                    this.submitLoading = false
                }
            } else {
                this.submitLoading = false
            }
        }

    }
};
</script>

<style lang="scss" scoped></style>
